---
title: Dark Mode
description: Adding dark mode to your next app.
---

<Steps>

### Install @kobalte/core

Start by installing `@kobalte/core`:

```bash
npm install @kobalte/core
```

### Wrap your root layout

Add the `Theme Provider` and `ColorModeScript` to your root.

```tsx {7,9-11,18,20,25}
import { useContext } from "solid-js"
import { isServer } from "solid-js/web"
import { ColorModeProvider, ColorModeScript, cookieStorageManagerSSR } from "@kobalte/core"
import { ..., ServerContext } from "solid-start"

export default function Root() {
  const event = useContext(ServerContext)

  const storageManager = cookieStorageManagerSSR(
    isServer ? event?.request.headers.get("cookie") ?? "" : document.cookie
  )

  return (
    <Html lang="en">
      <Head>...</Head>
      <Body>
        <ErrorBoundary>
          <ColorModeScript storageType={storageManager.type} />
          <Suspense>
            <ColorModeProvider storageManager={storageManager}>
              <Navbar />
              <Routes>
                <FileRoutes />
              </Routes>
            </ColorModeProvider>
          </Suspense>
        </ErrorBoundary>
        <Scripts />
      </Body>
    </Html>
  )
}
```

### Change the tailwind config & root.css to use data-kb-theme

```css {1}
[data-kb-theme="dark"] {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    ...
}
```

```js {3}
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["class", '[data-kb-theme="dark"]'],
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
  ...
}
```

### Add a mode toggle

Place a mode toggle on your site to toggle between light and dark mode.

<ComponentPreview name="mode-toggle" />

</Steps>
